<template>
  <div class="main">
      <div class="ucenter-head">
          <div class="avator-content">
              <img :src="avator" alt="">
          </div>
          <div class="ucenter-intro">
              <span>{{name}}</span>
              <div class="description">
                  {{des}}
              </div>
          </div>
          <div class="award-score-fans">
              <div class="award">
                  <span>{{award}}</span>
                  <span>证书</span>
              </div>
              <div class="score">
                  <span>{{score}}</span>
                  <span>积分</span>
              </div>
              <div class="fans">
                  <span>{{fans}}</span>
                  <span>粉丝</span>
              </div>
          </div>
      </div>
      <div class="ucenter-list">
          <div class="message-center line">                                  
              <span>消息中心</span>
          </div>
          <div class="attention line">
              <span>我的关注</span>
          </div>
          <div class="favorite line">
              <span>我的收藏</span>
          </div>
          <div class="plan">
              <span>培训计划</span>
          </div>
          <div class="record">
              <span>培训记录</span>
          </div>
          <div class="learning">
              <span>MyLearning</span>
          </div>
      </div>
  </div>
</template>
<script>
    export default {
      components: {},
      data () {
        return {
          avator: require('@/assets/image/avator.png'),
          name: 'Meilani',
          des: '一个胜利者不会放弃，而一个放弃者永远不会胜利。如果你想得到，你就会得到，你所需要付出的只是行动。',
          award: 24,
          score: 13,
          fans: 36
        }
      }
    }
</script>
<style lang="less">
  .main{
      width:100%;
      height: 100%;
      background-color:#F5F5F5;
      .ucenter-head{
          width:100%;
          padding:35px 55px 25px 56px;
          background-color:#C11613;
          .avator-content{
              position: relative;
              display: flex;
              justify-content: center;
              img{
                  width:86px;
                  height:86px;
                  border-radius: 100px;
              }
              &:after{
                  content:"";
                  position: absolute;
                  right:2px;
                  width:13px;
                  height:19px;
                  top:50%;
                  transform: translateY(-50%);
                  background: url("../../assets/image/arror-right.png") no-repeat center;
                  background-size: contain;
              }
          }
          .ucenter-intro{
              padding:16px 0 30px 0;
              border-bottom:1px dashed rgba(255,255,255,.2);
              span{
                  font-size:20px;
                  font-family:PingFang-SC-Medium;
                  color:rgba(255,255,255,1);
                  line-height:36px;
              }
              .description{
                  font-size:12px;
                  font-family:PingFang-SC-Medium;
                  color:#C08C88;
                  line-height:15px;
                  text-align: left;
                  padding-top:5px;
              }
          }
          .award-score-fans{
              display: flex;
              div{
                  padding-top:30px;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  span{
                      font-size:12px;
                      font-family:PingFang-SC-Medium;
                      color:#C08C88;
                      &:first-child{
                          font-size:18px;
                          color:rgba(255,255,255,1);
                          padding-bottom:3px;
                      }
                  }
              }
          }
      }
      .ucenter-list{
          width:100%;
          padding:0 55px 0 56px;
          background-color:#fff;
          display: flex;
          flex-wrap: wrap;
          div{
              position: relative;
              width: 33.3%;
              padding:26px 0 19px 0;
              display: flex;
              justify-content: center;
              flex-direction: column;
              &.line{
                  border-bottom: 1px solid #F0F0F0;
              }
              &:before{
                  content: "";
                  display: inline-block;
                  width:27px;
                  height: 27px;
                  margin:0 auto 10px;
              }
              &.message-center{
                  &:before{
                      background: url("../../assets/image/me-message.png") no-repeat center;
                      background-size: contain;
                  }
              }
              &.attention{
                  &:before{
                      background: url("../../assets/image/myattention.png") no-repeat center;
                      background-size: contain;
                  }
              }
              &.favorite{
                  &:before{
                      background: url("../../assets/image/favorite.png") no-repeat center;
                      background-size: contain;
                  }
              }
              &.plan{
                  &:before{
                      background: url("../../assets/image/project.png") no-repeat center;
                      background-size: contain;
                  }
              }
              &.record{
                  &:before{
                      background: url("../../assets/image/record.png") no-repeat center;
                      background-size: contain;
                  }
              }
              &.learning{
                  &:before{
                      background: url("../../assets/image/mylearning.png") no-repeat center;
                      background-size: contain;
                  }
              }
              span{
                  font-size:12px;
                  font-family:PingFang-SC-Medium;
                  color:#808080;
                  //line-height:52px;
              }
          }
      }
  }
</style>

